import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Table, InputNumber, Button, Form } from 'antd'
import { getGduCoefficient, saveGduCoefficient } from 'utils/Api'
import { toast } from 'react-toastify'

const textArr = {
  regionCoefficient: '地区系数',
  growthStageCoefficient: '生长阶段系数',
  varietyCoefficient: '品种系数',
  droughtCoefficient: '干旱系数',
  cropsGrow: '作物长势'
}
class Coefficient extends Component {
  constructor(props) {
    super(props)
    this.state = {
      id: undefined,
      pending: false,
      coefficients: [{
        key: 'regionCoefficient',
        value: ''
      },{
        key: 'growthStageCoefficient',
        value: ''
      }, {
        key: 'varietyCoefficient',
        value: ''
      }, {
        key: 'droughtCoefficient',
        value: ''
      }, {
        key: 'cropsGrow',
        value: ''
      }]
    }
  }
  componentDidMount() {
    const fd = new FormData()
    const { landId } = this.props
    fd.append('landId', landId)
    getGduCoefficient(fd)
      .then(({ msg, result: {
        regionCoefficient,
        growthStageCoefficient,
        varietyCoefficient,
        droughtCoefficient,
        cropsGrow,
        id,
      }}) => {
        if (msg === '200') {
          // this.setState
          const { coefficients } = this.state
          const newRegionCoefficient 
            = coefficients.filter(coeff => coeff.key === 'regionCoefficient')[0]
          newRegionCoefficient.value = regionCoefficient

          const newGrowthStageCoefficient
            = coefficients.filter(coeff => coeff.key === 'growthStageCoefficient')[0]
          newGrowthStageCoefficient.value = growthStageCoefficient

          const newVarietyCoefficient
            = coefficients.filter(coeff => coeff.key === 'varietyCoefficient')[0]
          newVarietyCoefficient.value = varietyCoefficient

          const newDroughtCoefficient
            = coefficients.filter(coeff => coeff.key === 'droughtCoefficient')[0]
          newDroughtCoefficient.value = droughtCoefficient

          const newCropsGrow
            = coefficients.filter(coeff => coeff.key === 'cropsGrow')[0]
          newCropsGrow.value = cropsGrow
          this.setState({
            coefficients: [
              newCropsGrow,
              newDroughtCoefficient,
              newGrowthStageCoefficient,
              newRegionCoefficient,
              newVarietyCoefficient,
            ],
            id,
          })
        }
      })
  }
  inputNumberChange = (key, value) => {
    const { coefficients } = this.state
    coefficients.map(item => {
      if(item.key === key) {
        item.value = value
      }
      return item
    })
    this.setState({
      coefficients
    })
  }
  handleSubmit = (e) => {
    e.preventDefault()
    const fd = new FormData()
    const { landId }= this.props
    const { id, coefficients } = this.state
   
    const info = {}
    info.id = id,
    info.landId = landId
    coefficients.map(item => {
      info[item.key] = item.value
    })
    this.setState({
      pending: true,
    })
    fd.append('info', JSON.stringify(info))    
    saveGduCoefficient(fd)
      .then(({msg}) => {
        if (msg === '200') {
          toast.success('保存成功')
          this.setState({
            pending: false,
          })
        }
      })
      .catch(err => this.setState({
        pending: false
      }))
  }
  render() {
    const { coefficients, pending } = this.state
    return (
      <li>
        <div className='ant-menu-submenu-title'>参数调整</div>
        <Form onSubmit={this.handleSubmit} className='xishu'>
          <Table showHeader={false}
            bordered
            pagination={false}
            dataSource={
              coefficients.map(item => ({
                key: item.key,
                name: textArr[item.key],
                value: item.value
              }))
            } columns={[{
              title: 'name',
              dataIndex: 'name',
              key: 'name',
            }, {
              title: 'value',
              dataIndex: 'value',
              key: 'value',
              render: (value, row, index) => {
                return <InputNumber value={value} step={0.01} min={0} onChange={this.inputNumberChange.bind(this, row.key)} />
              }
            }]} />
          <div className="xishu-form-button">
            <Button size={'small'} type="primary" htmlType="submit" disabled={pending}>
              {pending ? '保存中...' : '保存'}
            </Button>
          </div>
          
        </Form>
      </li>
      
    )  
  }
}
Coefficient.propTypes = {
  landId: PropTypes.string
}
export default Coefficient